<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit"/>
    <meta name="force-rendering" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="icon" type="image/x-icon" href="favicon.ico"/>
    <title>极简导航</title>
    <link type="text/css" rel="stylesheet" href="public/css/index.css?v=1.0.1">
    <!-- 本地实现iconfont 防止cdn不稳定造成无法显示icon -->
    <link type="text/css" rel="stylesheet" href="public/iconfont/iconfont.css">
</head>
<body>
<div id="app" ref="app" style="display: none">
    <!-- 背景图片 用css实现图片居中 -->
    <div class="background">
        <img :src="config.background" :style="{opacity: (config.settings.background.opacity / 100)}">
    </div>
    <!-- 预计要在这个位置加一个天气 类似百度登录后首页天气 接口考虑用tianqiapi.com 暂不考虑用iframe方案 太傻 -->
    <div id="he-plugin-simple"></div>
    <!-- 顶部菜单栏 目前只有settings一个按钮 -->
    <div class="header-bar">
        <div class="header-bar-btn" @click="dialogs.settings = true">
            <i class="iconfont icon-settings"></i>
        </div>
    </div>
    <!-- 中间搜索框 使用 select + input[type='text'] + button 拼接而成，搜索联想提示框则自己写div+js实现 -->
    <div class="search-bar"
         :class="{'search-bar-show-data-list': search.showSearchDatalist && search.words.length > 0}">

        <select v-model="search.searchEngineIndex">
            <option v-for="(item, index) in search.searchEngines" :key="index" :value="index">{{item.name}}</option>
        </select>
        <input ref="keyword" type="text" autofocus="autofocus" v-model="search.keyword" @keydown.enter="doSearch"
               @change="doInput" @input="doInput" @keydown.up="searchDataListOnKeyUp"
               @keydown.down="searchDataListOnKeyDown"
               @focus="onSearchDatalistFocusIn" @focusin="onSearchDatalistFocusIn" @focusout="onSearchDatalistFocusOut">
        <button @click="doSearch">搜索</button>
        <div class="search-datalist" v-if="search.showSearchDatalist">
            <div v-for="(word,index) in search.words" :key="index" class="search-datalist-item"
                 @mousedown="search.keyword = word; doSearch()"
                 :class="{'search-datalist-item-focus': search.focusIndex != null && index == search.focusIndex}">{{word}}
            </div>
        </div>
    </div>
    <!-- 收藏夹部分 -->
    <div class="bookmarks" :class="config.settings.theme" v-if="bookmarks.length > 0"
         :style="{background: (config.settings.theme == 'white' ? 'rgba(222,222,222,' : 'rgba(33,33,33,') + (config.settings.bookmarks.opacity / 100) + ')'}">
        <div class="bookmarks-group" v-for="(group,index) in bookmarks" :key="index">
            <div class="bookmarks-title"><span>{{group.name}}</span></div>
            <div class="bookmark" v-for="(bookmark,j) in group.marks" :key="j">
                <a :href="bookmark.url" target="_blank">
                    <!-- 收藏链接图片 首先判断icon是否为true 再看image是否有值(支持url / base64) 若image没有值则去链接url首页请求会去该网站首页下请求favicon.icon , 若icon为false用第一个字做简易icon(css实现) -->
                    <div class="bookmark-img" v-if="bookmark.icon"><img
                            :src="bookmark.image ? bookmark.image : getImage(bookmark.url)"></div>
                    <div class="bookmark-default-img" v-else>{{bookmark.name}}</div>
                    <div class="bookmark-name">{{bookmark.name}}</div>
                </a>
            </div>
        </div>
    </div>
    <!-- 设置页面 点击首页右上角设置按钮(透明小齿轮)出现 采用悬浮上层方式实现(fixed) -->
    <div class="settings" v-if="dialogs.settings">
        <i class="iconfont icon-close dialog-close" @click="dialogs.settings = false"></i>
        <!-- css实现左边菜单中心内容的布局 -->
        <div class="settings-menus">
            <ul class="settings-menu">
                <li v-for="(menu,index) in settingsMenus.menu"
                    :class="{'li-active' : settingsMenus.activeIndex == index}"
                    :key="index"
                    @click="settingsMenus.activeIndex = index"><i class="iconfont"
                                                                  :class="menu.icon"></i>{{menu.name}}
                </li>
            </ul>
        </div>
        <!-- 核心设置页 全部用html5原生组件实现 基本只微调css -->
        <div class="settings-center">
            <div v-if="settingsMenus.activeIndex == 0" class="settings-center-panel">
                <div class="settings-center-item">
                    <span class="label">搜索引擎: </span>
                    百度 <input type="radio" name="searchEngine" value="0"
                                v-model="config.settings.searchEngineDefaultIndex">
                    必应 <input type="radio" name="searchEngine" value="1"
                                v-model="config.settings.searchEngineDefaultIndex">
                    DuckGo <input type="radio" name="searchEngine" value="2"
                                  v-model="config.settings.searchEngineDefaultIndex">
                    Google <input type="radio" name="searchEngine" value="3"
                                  v-model="config.settings.searchEngineDefaultIndex">
                </div>
                <div class="settings-center-item">
                    <span class="label">主题色系: </span>
                    亮色系 <input type="radio" name="theme" value="white" v-model="config.settings.theme">
                    暗色系 <input type="radio" name="theme" value="black" v-model="config.settings.theme">
                </div>
                <div class="settings-center-item">
                    <span class="label">天气组件: </span>
                    开启 <input type="radio" name="weather" value="1" v-model="config.settings.weather.open">
                    关闭 <input type="radio" name="weather" value="0" v-model="config.settings.weather.open">
                    颜色: <input type="text" v-model="config.settings.weather.color">
                </div>
                <div class="settings-center-item">
                    <span class="label">书签栏透明度: </span>
                    <input type="range" min="0" max="100" v-model="config.settings.bookmarks.opacity">
                    <span>{{config.settings.bookmarks.opacity}}%</span>
                </div>
                <div class="settings-center-item">
                    <span class="label">选择背景图片: </span>
                    <input type="file" accept="image/*" @change="changeBackgroundImage">
                </div>
                <div class="settings-center-item">
                    <span class="label">背景图透明度: </span>
                    <input type="range" min="0" max="100" v-model="config.settings.background.opacity">
                    <span>{{config.settings.background.opacity}}%</span>
                </div>
                <div class="settings-center-item picture-item">
                    <img :src="config.background" v-if="config.background">
                </div>
            </div>
            <!-- 书签设置页 本来应该是做成图形可视化操作 奈何用原生html5自己写div+js太累了 暂时用json配置方式实现 -->
            <div v-else-if="settingsMenus.activeIndex == 1" class="settings-center-panel settings-bookmarks">
                <div class="settings-center-item">
                    <span class="label-smail">当前视图: </span>
                    图形 GUI <input type="radio" name="theme" value="gui" v-model="config.settings.bookmarksView">
                    数据 JSON <input type="radio" name="theme" value="json" v-model="config.settings.bookmarksView">

                    <div v-if="config.settings.bookmarksView == 'json'" class="settings-bookmarks-bottom-button">
                        <button @click="jsonFormat">格式化</button>
                        <button @click="jsonCompress">压缩</button>
                        <button @click="jsonSave">保存</button>
                        <button @click="jsonReset">取消</button>
                    </div>
                </div>
                <div v-if="config.settings.bookmarksView == 'gui'" class="settings-bookmarks-view">
                    <div v-for="(bookmark,index) in bookmarks" :key="index">
                        <div class="settings-bookmarks-view-group">
                            <div class="settings-bookmarks-view-group-title"><span
                                    class="label-smail">标题: </span><input
                                    v-model="bookmark.name"><span class="delete"
                                                                  @click="deleteBookmarksGroup(bookmark.name, index)"><i
                                    class="iconfont icon-close"></i></span></div>
                            <div>
                                <div v-for="(mark,i) in bookmark.marks" :key="i"
                                     class="settings-bookmarks-view-marks-group">
                                    <div class="marks-group-image-box" @click="changeIcon(mark, index, i)">
                                        <div class="marks-group-image" v-if="mark.icon">
                                            <img :src="mark.image ? mark.image : getImage(mark.url)">
                                        </div>
                                        <div class="marks-group-default-image" v-else>{{mark.name}}</div>
                                        <div><i class="iconfont icon-edit"></i></div>
                                    </div>
                                    <div class="marks-group-settings">
                                        <input v-model="mark.name">
                                        <input v-model="mark.url">
                                        <i class="iconfont icon-delete item-close"
                                           @click="deleteBookmark(mark.name, index, i)"></i>
                                    </div>
                                </div>
                                <div>
                                    <span class="settings-bookmarks-add" @click="newBookmark(index)"><i
                                            class="iconfont icon-add"></i>新增书签</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="settings-bookmarks-view-group">
                        <span class="settings-bookmarks-add" @click="newGroup"><i class="iconfont icon-add"></i><span>新增分组</span></span>
                    </div>
                </div>
                <div v-if="config.settings.bookmarksView == 'json'">
                    <textarea v-model="bookmarksStringTemp" @change="jsonCheck" @input="jsonCheck"></textarea>
                    <div class="settings-bookmarks-bottom">
                        <span>JSON格式：{{bookmarksCheck ? '正确' : '错误'}}</span>
                    </div>
                </div>

            </div>
            <!-- 全站数据导入导出 由于目前没有后端 无法登陆和云端保存数据 本地缓存数据一旦丢失会造成整个网站恢复成默认状态 所以需要导出一份配置文件作为备份 -->
            <div v-else-if="settingsMenus.activeIndex == 2" class="settings-center-panel">
                <div class="settings-input-output">
                    <button @click="inPutSettings">导入</button>
                    <button @click="outPutSettings">导出</button>
                    <button @click="resetSettings" class="settings-input-output-reset">重置</button>
                </div>
            </div>
            <!-- 模型加载 -->
            <div v-if="settingsMenus.activeIndex == 3" class="settings-center-panel">
                <div class="settings-input-output settings-live2d">
                    <p class="settings-live2d-message">
                        这是一个非常不极简的功能(手动doge)，开启后会增加cpu算力消耗，但是我个人很喜欢，所以就加了这个功能，不喜勿开
                        (手动滑稽)
                    </p>
                    <div class="settings-center-item">
                        <span class="label-smail">模型开关: </span>
                        <div class="settings-live2d-switch">
                            <input id="live2d-open" type="checkbox" class="switch" v-model="live2d.open"
                                   @change="loadLive2dResources">
                            <label for="live2d-open"></label>
                        </div>
                    </div>
                    <div class="settings-center-item" v-if="live2d.show">
                        <span class="label-smail">选择模型: </span>
                        <div class="settings-live2d-model" v-for="(model,index) in live2d.models" :key="index"
                             @click="live2d.json = model.value"
                             :style="{borderColor: (live2d.json == model.value ? '#0075ff':'rgba(0,0,0,.33)')}">
                            <span style="cursor: unset;margin-left: 8px">{{model.name}}</span>
                            <input type="radio" name="models" :value="model.value" v-model="live2d.json">
                        </div>
                    </div>
                </div>
            </div>
            <!-- 关于页面 -->
            <div v-else-if="settingsMenus.activeIndex == 4" class="settings-center-panel">
                <div style="color: #555;padding-top: 1rem">
                    <div style="margin-top: .5rem">
                        <img src="favicon.ico" style="vertical-align: middle">
                        <span style="font-size: 24px;margin-left: 12px;line-height: 32px;vertical-align: middle">极简导航</span>
                        <span style="font-size: 13px;margin-left: 8px;color: #777;vertical-align: bottom">1.0.1</span>
                    </div>
                    <p style="padding-top: 1.5rem;font-size: 15px;line-height: 32px;">
                        极简导航是一个由个人开发的导航网站，代码方面遵循我个人浅薄理解的极简主义，<br>
                        在当前版本1.0.0 中，<br>
                        所有功能都只用纯前端实现，无任何形式的服务端接口，不会获取用户隐私等信息，<br>
                        相应的也无法做到登录和云同步等功能，且如果浏览器清理了缓存，数据也有可能丢失，导致所有配置恢复成初始状态，<br>
                        对于这个问题，目前的建议是配置完成后，导出一份备份json存在电脑本地，若出问题可以随时恢复。<br>
                        如果使用后有任何意见建议，都可以联系邮箱<a href="mailto:admin@zzzmh.cn">admin@zzzmh.cn</a><br>
                        <br>
                        关于icon，有3种方法配置 <br>
                        1 是icon设为true,image设为url或base64 <br>
                        2 是icon设为true,image设为null,程序会自动去收藏网址的首页请求favicon.ico,国内网站80%会获取成功
                        <br>
                        3 是icon设为false,image设为null,程序会自动获取首字母，生成简易icon <br>
                        <br>
                        更多信息欢迎到开源地址github上查看 <br>
                        Github： <a href="https://github.com/zzzmhcn/nav"
                                   target="_blank">https://github.com/zzzmhcn/nav</a> <br>
                        Gitee： <a href="https://gitee.com/zzzmhcn/nav" target="_blank">https://gitee.com/zzzmhcn/nav</a>
                        <br>
                        线上地址：<a href="https://nav.zzzmh.cn" target="_blank">https://nav.zzzmh.cn</a>
                    </p>
                    <p>
                        <br><br>
                        <img src="https://s2.loli.net/2023/06/02/caw4KmEWXbOMTFy.png">
                        <br>
                        感谢 <a href="https://jb.gg/OpenSourceSupport" target="_blank">JetBrains</a> 为本项目提供免费License支持
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="settings-icon" v-if="dialogs.settingsIcon">
        <div class="settings-icon-panel">
            <div class="settings-icon-panel-title"><span>LOGO 设置</span></div>
            <i class="iconfont icon-close dialog-close" @click="dialogs.settingsIcon = false"></i>
            <div class="settings-icon-panel-type">
                <span class="label-small">方式1: </span>
                <input type="radio" name="type" checked value="0" v-model="icon.flag">
                <span class="label-small">方式2: </span>
                <input type="radio" name="type" value="1" v-model="icon.flag">
                <span class="label-small">方式3: </span>
                <input type="radio" name="type" value="2" v-model="icon.flag">
            </div>
            <!--            <div class="bookmark-img" v-if="bookmark.icon"><img-->
            <!--                    :src="bookmark.image ? bookmark.image : getImage(bookmark.url)"></div>-->
            <!--            <div class="bookmark-default-img" v-else>{{bookmark.name}}</div>-->
            <!--            <div class="bookmark-name">{{bookmark.name}}</div>-->
            <div v-if="icon.flag == 0">
                <div class="settings-icon-panel-tips">
                    <p>手动上传logo</p>
                    <input type="file" accept="image/*" @change="uploadIcon">
                </div>
                <div class="bookmark">
                    <div class="bookmark-img">
                        <img v-if="icon.image" :src="icon.image">
                    </div>
                    <div class="bookmark-name">{{icon.name}}</div>
                </div>
            </div>
            <div v-else-if="icon.flag == 1">
                <div class="settings-icon-panel-tips">
                    <p>网站根目录下的favicon.ico</p>
                </div>
                <div class="bookmark">
                    <div class="bookmark-img">
                        <img v-if="icon.url" :src="getImage(icon.url)">
                    </div>
                    <div class="bookmark-name">{{icon.name}}</div>
                </div>
            </div>
            <div v-else-if="icon.flag == 2">
                <div class="settings-icon-panel-tips">
                    <span>使用网站名称首字母的文本</span>
                </div>
                <div class="bookmark">
                    <div class="bookmark-default-img">
                        {{icon.name}}
                    </div>
                    <div class="bookmark-name">{{icon.name}}</div>
                </div>
            </div>
            <div class="settings-icon-panel-bottom">
                <button @click="confirmIcon">保存</button>
                <button @click="dialogs.settingsIcon = false">取消</button>
            </div>
        </div>
    </div>
    <canvas id="live2d" width="256" height="256" v-show="live2d.show"></canvas>
</div>
<script src="public/js/vue.min.js"></script>
<script src="public/js/idb-keyval.min.js"></script>
<script src="public/js/index.js?v=1.0.1"></script>
<script async src="https://hm.baidu.com/hm.js?f87b822d1b92d32c92eaee53be6db31b"></script>
</body>
</html>
